<template>
	<view id="MaterialImage" class="material-image" :style="'width:' + width + ';height:' + height + ';'">
		<image :src="store.signedUrl" @load="onload" mode="heightFix"
			:style="'margin-left:'+ ml + 'margin-top:' + mt +'width:' + w + ';height:' + h + ';'" />
	</view>
</template>

<script>
	export default {
		name: "material-image",
		props: {
			store: {
				type: Object,
				default: () => {}
			},
			width: { // 宽度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: "70px"
			},
			height: { // 高度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: "70px"
			},
		},
		data() {
			return {
				ml: '0px',
				mt: '0px',
				w: this.width,
				h: this.height
			}
		},
		methods: {
			onload: async function(e) {
				let img = e.target;
				let rect = await this.$app.getDomBoundingClientRect('#MaterialImage', this);
				this.scale(img, rect.width, rect.height);
			},
			scale: function(img, w, h) {
				let ow = img.width,
					oh = img.height;
				if (ow >= oh) {
					img.width = h * ow / oh;
					img.height = h;
					this.ml = parseInt((img.width - w) / 2) * -1 + 'px;';
				} else {
					img.width = w;
					img.height = w * oh / ow;
					this.mt = parseInt((img.height - h) / 2) * -1 + 'px;';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.material-image {
		overflow: hidden;

		image {
			overflow: hidden;
			display: block;
		}
	}
</style>
